<template>
    <div id="cart">
        <Vheader/>
        <div v-if="!car.length">kongkomn</div>
        <div class="cart-top-container" v-else>
            <div class="t-center cc7 ptb40">Spend $48.01 more to enjoy FREE SHIPPING | Want to enjoy free shipping?</div>
            <div class="cart-table-wrap">
                <ul>
                    <li v-for="(item,i) in car" :key="i" class="cart-list">
                        <div class="mobile-cart-top">
                            <div class="td-list img-p">
                                <img :src="item.image" alt="">
                            </div>
                            <div class="td-list name-p">
                                <h2 class="product-name" style="word-wrap: break-word;">{{item.title}}</h2>
                                <div class="td-list edit-p">SKU：{{item.sku}}</div>
                                <div class="mobile-cart-bottom">
                                    <div class="td-list in-p">
                                        <label class="qty-label">QTY:</label>
                                        <span class="qty_dec" @click="subtract(item)">-</span>
                                        <input type="text" name="qty"  min="1" maxlength="2" :value="item.num" class="input-text">
                                        <span class="qty_inc" @click="augment(item)">+</span>
                                    </div>
                                    <span class="price">${{Number(item.price.substr(1)) * item.num}}</span>
                                </div>
                            </div>
                        </div>                        
                    </li>
                </ul>
            </div>
            <VCartList></VCartList>            
        </div>
    </div>
</template>
<script>
import Vheader from './../template/header.vue'
import VCartList from './default/cart-list.vue'
import { mapState,mapActions } from 'vuex'
export default {
    name:'cart',
    components: {  
        Vheader,
        VCartList     
    },
    data(){
        return { 
            
        }
    },
    //mapState通过扩展运算符将store.state.xxx 映射this.xxx
    computed:{
        ...mapState(['car'])
    },
    methods:{
        ...mapActions(['subtract','augment'])
        
    }
}
</script>
<style>
.cart-top-container{
    background: #eff1f1;
    padding: 15px;
}
.t-center.cc7.ptb40{
    line-height: 1.5;
    font-size: 12px;
    color: #000;
    text-align:center;
}
.cart-table-wrap{
    background: #fff;
    padding: 10px;
    margin-top:15px;
}
.cart-table-wrap ul {
    display: flex;
    flex-flow: column;
    padding:0;
}
.mobile-cart-top{
    display: flex;
}
.td-list.img-p{
    width:30%;
}
.td-list.img-p img{
    width: 80%;
}
.td-list.name-p{
    width: 70%;
}
.product-name{
    font-size: 13px;
    text-align: left;
    margin-bottom: 5px;
    height: 30px;
    overflow: hidden;
}
.td-list.edit-p{
    font-size: 13px;
    text-align: left;
    margin-bottom:10px;
}
.mobile-cart-bottom{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.td-list.in-p{
    display: flex;
    align-items: center;
}
.qty_dec,.qty_inc{
    width: 28px;
    font-size: 24px;
}
.input-text{
    width: 35px;
    text-align: center;
    border: 1px solid #ccc;
    line-height: 20px;
}
.checkout-types{
    margin: 15px 0;
    padding: 10px;
    background: #fff;
}
.btn-checkout{
    display: block;
    margin-top: 15px;
    width: 100%;
    background: #e60044;
    color: #fff;
    padding: 15px 0;
}
.checkout-types .price{
    text-align: right;
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-top: 20px;
}
.qty-label{
    font-size: 13px;
}
.cart-list{
    margin-bottom:10px;
    position: relative;
    padding-bottom: 10px;
}
.cart-list:after{
    content: "";
    position: absolute;
    width: calc(100% - 2%);    
    height:1px;
    background: #ccc;
    bottom:0%;
    left:1%;

}

</style>

